<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>统计</title>

    <link href="../../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/user/statistics.css" rel="stylesheet"/>

    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script charset="UTF-8" src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../../../js/echarts/echarts.min.js"></script>
    <script src="../../../js/vue-compents/btn-group-common.js"></script>
    <script src="../../../js/vue-compents/ChartUtil.js"></script>
    <script charset="UTF-8" src="../../../js/statistics/index.js"></script>
    <script charset="UTF-8" src="../../../js/vue-compents/common-chart.js"></script>
    <script charset="UTF-8" src="../../../js/vue-compents/testData.js"></script>

    <style>
        .header-btn {
            margin: 1rem 0;
        }

        .chart-container {
            width: 90%;
            margin: 0 auto;
        }

        .my-pie {
            height: 40rem;
        }

        .time-chart-pie {
            height: 30rem;
        }

        body {
            background-color: #fff !important;
        }
    </style>
</head>
<body>
<div id="app" style="background-color: #fff">
    <div class="header-nav" style="z-index: 99999999">

        <!--标题下拉-->
        <btn-header-select img-src="../../../img/common/btn_unfold@3x.png" v-model="titleIndex"
                           :option-data="titleArray"></btn-header-select>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
        <!-- 筛选 -->
        <btn-header-sort :title="rightName" :option-data="btnRightArray[rightType]" :multi="rightMulti"
                         v-model="rightId"
                         img-src="../../../img/statistics/btn_screen@3x.png"></btn-header-sort>

    </div>
    <!-- 图表展示区域 -->
    <div id="chartContain" class="container setting chart-container">
        <!--月份选项按钮-->
        <btn-group-common v-show="showTimeBar" class="header-btn" v-model="timeSelectIndex"
                          :options="btnOptions"></btn-group-common>
        <!--时间选项按钮-->
        <btn-group-common v-show="showDayBar" class="header-btn" v-model="daySelectIndex"
                          :options="dayBtnOptions"></btn-group-common>


        <!--工作量统计-->
        <div v-if="titleIndex == 0">
            <!--订单总量-->
            <common-line-chart :style="{width:chartContentWidth+'px'}"
                               :options="chartDataObject.work.total"></common-line-chart>

            <common-line-chart :style="{width:chartContentWidth+'px'}"
                               :options="chartDataObject.work.pm"></common-line-chart>
            <!--维修量-->
            <common-line-chart :style="{width:chartContentWidth+'px'}"
                               :options="chartDataObject.work.fix"></common-line-chart>
        </div>
        <!--订单用时统计-->
        <div v-if="titleIndex == 1">
            <!--柱状图-->
            <order-time-bar-chart :style="{width:chartContentWidth+'px'}"
                                  :options="chartDataObject.order.time"></order-time-bar-chart>
            <!--饼图-->
            <common-pie-chart class="time-chart-pie" :style="{width:chartContentWidth+'px'}"
                              :options="chartDataObject.order.type"></common-pie-chart>
        </div>
        <!--故障模块统计-->
        <div v-if="titleIndex == 2">
            <!--饼图-->
            <common-pie-chart class="my-pie" :style="{width:chartContentWidth+'px'}"
                              :options="chartDataObject.failures.total"></common-pie-chart>
        </div>
        <!--机具品牌-->
        <div v-if="titleIndex == 3">
            <common-bar-chart :style="{width:chartContentWidth+'px'}"
                              :options="chartDataObject.device.brand"></common-bar-chart>
            <common-bar-chart :style="{width:chartContentWidth+'px'}"
                              :options="chartDataObject.device.server"></common-bar-chart>
        </div>
        <!--重复统计-->
        <div v-if="titleIndex == 4">
            <div class="order-repeat-title">
                按照 <span class="order-text-info">{{inputFixDay}}</span> 工作日计算重复维修
                <div @click="updateDayBtn" class="order-repeat-title-btn"><img src="../../../img/common/btn_edit@3x.png"
                                                                               alt=""></div>
            </div>
            <div class="order-repeat-card-outer">
                <div class="orco-title">
                    共计：重复维修<span
                        class="order-text-notice">{{statistics.orderRepeat.allAndOne.atmCounts}}</span>台，重复维修<span
                        class="order-text-notice">{{statistics.orderRepeat.allAndOne.repeatCounts}}</span>次
                </div>
                <div class="orco-text" v-if="statistics.orderRepeat.allAndOne.atmCounts > 0">
                    其中单台最高重复维修{{statistics.orderRepeat.allAndOne.oneATM.repeatCounts}}次 <br>
                    （{{statistics.orderRepeat.allAndOne.oneATM.atm_code}}-{{statistics.orderRepeat.allAndOne.oneATM.atm_ins_side}}-{{statistics.orderRepeat.allAndOne.oneATM.atm_type}})
                </div>
            </div>
            <div class="order-repeat-card-outer">
                <div class="orco-item" v-for="item of statistics.orderRepeat.tpmList">
                    <span class="orco-title">{{item.tpm_org_name}}：</span><span class="order-text-info">{{item.atmCounts}}</span>台，重复维修<span
                        class="order-text-info">{{item.repeatCounts}}</span>次
                </div>
            </div>
        </div>
        <!--<xlb-modal v-model="updateDayModal">-->
        <!--<div class="dialog-content order-fix-modal" slot="content">-->
        <!--设备按照 <input class="fix-input" v-model="inputFixDay" type="number"> 个工作日计算重复维修-->
        <!--</div>-->
        <!--<div slot="footer-left">取消</div>-->
        <!--<div slot="footer-right" @click="doSearchDayList">提交</div>-->
        <!--</xlb-modal>-->
        <user-change-repeat-day :show.sync="updateDayModal" :day="inputFixDay" @change="changeFixDay"></user-change-repeat-day>
    </div>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        mounted: function () {
            this.chartContentWidth = document.getElementById('chartContain').offsetWidth;
        },
        data: {
            updateDayModal: false,
            titleArray: ['工作量统计', '订单用时统计', '故障模块分类统计', '机具品牌统计', '重复维修统计'],
            titleIndex: 0,


            btnOptions: ['上周', '本周', '上月', '本月'],
            timeSelectIndex: 0,

            dayBtnOptions: ['30天', '60天', '90天'],
            daySelectIndex: 0,
            fixDay: 30,
            inputFixDay: 30,

            btnRightArray: {
                server: [],
                deviceType: []

            },
            rightType: 'deviceType',
            rightName: '您要看什么机具？',
            rightId: '',
            rightMulti: false, // 右侧多选框

            chartContentWidth: '',
            chart: null,
            chartDataObject: {
                work: {
                    total: {
                        title: '订单总量',
                        lineColor: '#FFA148',
                        xData: [],
                        yData: []
                    },
                    pm: {
                        title: 'PM量',
                        lineColor: '#7DD272',
                        xData: [],
                        yData: []
                    },
                    fix: {
                        title: '维修量',
                        lineColor: '#76B4EE',
                        xData: [],
                        yData: []
                    }
                },
                device: {
                    brand: {
                        title: '机具品牌(个)',
                        xData: [],
                        yData: []
                    },
                    server: {
                        title: '机具维护商(个)',
                        lineColor: '#7DD272',
                        xData: [],
                        yData: []
                    }
                },
                order: {
                    time: {
                        title: '订单用时分析(分钟)',
                        xData: [],
                        yData: []
                    },
                    type: {
                        title: '订单类型分析',
                        lineColor: '#7DD272',
                        xData: [],
                        yData: []
                    }
                },
                failures: {
                    total: {
                        title: '故障模块汇总(个)',
                        xData: [],
                        yData: [],
                        type: 'big'
                    },
                    day: {
                        title: '故障模块日报表(个)',
                        lineColor: '#7DD272',
                        xData: [],
                        yData: []
                    }
                },
            },
            statistics: {
                orderRepeat: {
                    tpmList: [],
                    allAndOne: {
                        oneATM: {},
                        atmCounts: 0,
                        repeatCounts: 0
                    }

                }
            }

        },
        computed: {
            showTimeBar: function () {
                return [0, 1, 2].indexOf(this.titleIndex) >= 0;
            },
            showDayBar: function () {
                return this.titleIndex === 4;
            }
        },
        methods: {
            changeFixDay: function (val) {
                this.inputFixDay = val;
                this.changeData();
            },
            updateDayBtn: function () {
                this.updateDayModal = !this.updateDayModal;
            },
            doSearchDayList: function () {
                this.initOrderRepeatFixList();
                this.updateDayBtn();
            },
            // 工作量统计
            initWorkList: function () {
                var params = getTimeOrOtherParams(vm.timeSelectIndex, {type: 1, value: this.rightId});
                Resource.get(STATISTICS_ORDER_WORK_TOTAL, params, function (res) {
                    buildWorkData(vm.chartDataObject.work, res);
                })
            },
            // 机具品牌统计
            initDeviceBrandList: function () {
                var params = getTimeOrOtherParams(vm.timeSelectIndex, {type: 2, value: this.rightId});
                Resource.get(STATISTICS_DEVICE_BRAND, params, function (res) {
                    buildDevicekData(vm.chartDataObject.device, res, 1);
                })
                Resource.get(STATISTICS_DEVICE_SERVER, params, function (res) {
                    buildDevicekData(vm.chartDataObject.device, res, 2);
                })
            },
            // 订单用时统计
            initOrderList: function () {
                var params = getTimeOrOtherParams(vm.timeSelectIndex, {type: 2, value: this.rightId});
                Resource.get(STATISTICS_ORDER_TIME, params, function (res) {
                    buildOrderWithTimeData(vm.chartDataObject.order, res, 1);
                })
                Resource.get(STATISTICS_ORDER_TYPE, params, function (res) {
                    buildOrderData(vm.chartDataObject.order, res, 2);
                })

            },
            // 故障模块
            initFailureList: function () {
                var params = getTimeOrOtherParams(vm.timeSelectIndex, {type: 1, value: this.rightId});
                Resource.get(STATISTICS_ORDER_ERROR_TOTAL, params, function (res) {
                    buildFailureData(vm.chartDataObject.failures, res, 1);
                })
            },
            // 故障重复保修统计
            initOrderRepeatFixList: function () {

                var params = getRepairOrderParams(this.inputFixDay,this.daySelectIndex, {type: 1, value: this.rightId});

                Resource.get(STATISTICS_ORDER_REPEAT_DAY, params, function (res) {
                    if (!res.tpmList) {
                        res.allAndOne = {
                            atmCounts: 0,
                            repeatCounts: 0
                        }
                    }
                    vm.statistics.orderRepeat = res;
                })
            },
            changeData: function () {
                switch (this.titleIndex) {
                    case 0:
                        this.initWorkList();
                        break;
                    case 1:
                        this.initOrderList();
                        break;
                    case 2:
                        this.initFailureList();
                        break;
                    case 3:
                        this.initDeviceBrandList();
                        break;
                    case 4:
                        this.initOrderRepeatFixList();
                        break;
                }
            },
            initRightList: function () {
                Resource.get(STATISTICS_DEVICE_TYPE, {}, function (res) {
                    function buildDeviceTypeData(data) {
                        var result = [];
                        for (var i = 0; i < data.length; i++) {
                            result.push({name: data[i].typeName, id: data[i].type});
                        }
                        return result;
                    }

                    vm.btnRightArray.deviceType = buildDeviceTypeData(res);
                });
                Resource.get(STATISTICS_SERVICER, {}, function (res) {
                    function buildServersData(data) {
                        var result = [];
                        for (var i = 0; i < data.length; i++) {
                            result.push({name: data[i].tenantDisName, id: data[i].tenantDisId});
                        }
                        return result;
                    }

                    vm.btnRightArray.server = buildServersData(res);
                })
            }
        },
        watch: {
            timeSelectIndex: function (data) {
                this.changeData();
            },
            daySelectIndex: function (data) {
                this.changeData();
            },
            // 处理选项卡变更
            titleIndex: function (val) {
                if (val === 3 || val === 1) { // 机具品牌统计 和 订单用时
                    this.rightType = 'server'
                    this.rightName = '您要看什么维护商？';
                } else {
                    this.rightType = 'deviceType'
                    this.rightName = '您要看什么机具？';
                }

                this.timeSelectIndex = '';
                this.daySelectIndex = '';
                this.rightId = '';
                this.fixDay = 30;
                this.inputFixDay = 30;
                this.changeData();
                val === 4 ? this.rightMulti = true : this.rightMulti = false;
            },
            rightId: function () {
                vm.changeData();
            }
        }
    });
    //监听初始化
    mui.plusReady(function () {
        vm.changeData();
        vm.initRightList();
    });
</script>

</body>
</html>